<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

	<head>
		<!-- Meta Tags -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="author" content="wpoceans">
		<!-- Page Title -->
		<title>Home</title>
		<!-- Icon fonts -->
		<link href="assets/css/themify-icons.css" rel="stylesheet">
		<link href="assets/css/flaticon.css" rel="stylesheet">
		<!-- Bootstrap core CSS -->
		<link href="assets/css/bootstrap.min.css" rel="stylesheet">
		<!-- Plugins for this template -->
		<link href="assets/css/animate.css" rel="stylesheet">
		<link href="assets/css/owl.carousel.css" rel="stylesheet">
		<link href="assets/css/owl.theme.css" rel="stylesheet">
		<link href="assets/css/slick.css" rel="stylesheet">
		<link href="assets/css/slick-theme.css" rel="stylesheet">
		<link href="assets/css/odometer-theme-default.css" rel="stylesheet">
		<link href="assets/css/owl.transitions.css" rel="stylesheet">
		<link href="assets/css/jquery.fancybox.css" rel="stylesheet">
		<link href="assets/css/magnific-popup.css" rel="stylesheet">
		<link href="assets/css/nice-select.css" rel="stylesheet">
		<link href="assets/css/bootstrap-datepicker.min.css" rel="stylesheet">
		<!-- Custom styles for this template -->
		<link href="assets/css/style.css" rel="stylesheet">
		<link href="assets/css/hotelList.css" rel="stylesheet">
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>

	<body id="home">
		<!-- start page-wrapper -->
		<div class="page-wrapper">
			<!-- start preloader -->
			<div class="preloader">
				<div class="spinner">
					<div class="bounce1"></div>
					<div class="bounce2"></div>
					<div class="bounce3"></div>
				</div>
			</div>
			<!-- end preloader -->
			<!-- Start header -->
			<header id="header">
				<div class="topbar">
					<div class="container-fluid">
						<div class="row">
							<div class="col col-md-6 col-sm-7 col-12">
								<div class="contact-intro">
									<ul>
										<li><i class="fi ti-location-pin"></i>28 Street, 位置, 蝶恋花</li>
										<li><i class="fi flaticon-email"></i> varaus@gmail.com</li>
									</ul>
								</div>
							</div>
							<div class="col col-md-6 col-sm-5 col-12">
								<div class="contact-info">
									<ul>
										<li><a href="#"><i class="ti-facebook"></i></a></li>
										<li><a href="#"><i class="ti-twitter-alt"></i></a></li>
										<li><a href="#"><i class="ti-instagram"></i></a></li>
										<li><a href="#"><i class="ti-google"></i></a></li>
										<li><a href="#"> </a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div> <!-- end topbar -->
				<div class="site-header header-style-1">
					<nav class="navigation navbar navbar-default">
						<div class="container-fluid">
							<div class="navbar-header">
								<button type="button" class="open-btn">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<a class="navbar-brand" href="main.html"><img src="assets/images/logo.png" alt=""></a>
							</div>
							<div id="navbar" class="navbar-collapse collapse navigation-holder">
								<button class="close-navbar"><i class="ti-close"></i></button>

							</div><!-- end of nav-collapse -->
							<div class="cart-search-contact">
								<div class="get-quote">
									<a href="#"><i class="fi flaticon-support-1"></i>Call : +0123-456-789</a>
								</div>
								<div class="header-search-form-wrapper">
									
									<div class="header-search-form">
										<form>
											<div>
												<input type="text" class="form-control" placeholder="Search here...">
												<button type="submit"><i class="fi flaticon-search"></i></button>
											</div>
										</form>
									</div>
								</div>
								<div class="mini-cart">
									<button class="cart-toggle-btn"> <i class="fi flaticon-user"></i></button>
									<div class="mini-cart-content" >
										<div class="mini-cart-title">
											<img src="assets/images/user.png" style="width: 50px; margin:10px 80px 10px 110px;" />
											<p style="text-align: center; background-color: #999999">未登录</p>
										</div>
										<div class="mini-cart-items" style="margin-left: 80px;">
											<button type="button" class="theme-btn-s2" style="background-color: #31B0D5; margin-right: 10px;"><a href="login.html">登录</a></button>
											<button type="button" class="theme-btn-s2" style="background-color: #00B67A;">注册</button>
									</div>
								</div>
							</div>
						</div><!-- end of container -->
					</nav>
				</div>
			</header>
			<!-- end of header -->
			<!-- start of hero -->
			<section class="hero hero-style-2">
				<div class="hero-slider">
					<div class="slide">
						<div class="container">
							<img src="assets/images/slider/slide-4.jpg" alt class="slider-bg">
							<div class="row">
								<div class="col col-md-8 slide-caption">
									<div class="slide-title">
										<h2>蝶恋花酒店</h2>
									</div>
									<div class="slide-subtitle">
										<p>只需10元！！！ 十元你买不了吃亏</p>
									</div>
									<div class="btns">
										<a href="#" class="theme-btn">预订房间</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="slide">
						<div class="container">
							<img src="assets/images/slider/slide-5.jpg" alt class="slider-bg">
							<div class="row">
								<div class="col col-md-8 slide-caption">
									<div class="slide-title">
										<h2>蝶恋花酒店</h2>
									</div>
									<div class="slide-subtitle">
										<p>10元你买不了上当</p>
									</div>
									<div class="btns">
										<a href="#" class="theme-btn">预订房间</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="slide">
						<div class="container">
							<img src="assets/images/slider/slide-6.jpg" alt class="slider-bg">
							<div class="row">
								<div class="col col-md-8 slide-caption">
									<div class="slide-title">
										<h2>蝶恋花酒店</h2>
									</div>
									<div class="slide-subtitle">
										<p>蝶恋花仅仅需要10元</p>
									</div>
									<div class="btns">
										<a href="#" class="theme-btn">预订房间</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="slide">
						<div class="container">
							<img src="assets/images/slider/slide-7.jpg" alt class="slider-bg">
							<div class="row">
								<div class="col col-md-8 slide-caption">
									<div class="slide-title">
										<h2>蝶恋花酒店</h2>
									</div>
									<div class="slide-subtitle">
										<p>想怎么嫖就怎么嫖！！！</p>
									</div>
									<div class="btns">
										<a href="#" class="theme-btn">预订房间</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- end of hero slider -->
			<!-- serch-area-start -->
			<div class="wpo-select-section">
				<div class="container">
					<div class="row">
						<div class="col-lg-12">
							<div class="wpo-select-wrap">
								<div class="wpo-select-area">

									<!-- 搜索类型提交表单 -->
									<form class="clearfix">
										<div class="select-sub">
											<span><i class="fi flaticon-calendar"></i>入住 - 日期</span>
											<div class="form-group">
												<div id="filterDate">
													<!-- Datepicker as text field -->
													<div class="input-group date" data-date-format="dd.mm.yyyy">
														<input type="text" class="form-control" placeholder="01.06.2020">
														<div class="input-group-addon">
															<span class="ti-angle-down"></span>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="select-sub">
											<span><i class="fi flaticon-calendar"></i>退房 - 日期</span>
											<div class="form-group">
												<div id="filterDate2">
													<!-- Datepicker as text field -->
													<div class="input-group date" data-date-format="dd.mm.yyyy">
														<input type="text" class="form-control" placeholder="01.06.2020">
														<div class="input-group-addon">
															<span class="ti-angle-down"></span>
														</div>
													</div>
												</div>
											</div>
										</div>


										<div class="select-sub">
											<button class="theme-btn-s2" type="submit"><i class="glyphicon glyphicon-search"></i>搜 索</button>
										</div>
									</form>
									<!-- 表单结束 -->
									<div class="row" style="margin-left: 100px;">
										<div class="col-md-2">
											<div class="select-sub">
												<span> <i class="glyphicon glyphicon-map-marker" style="font-size: 18px;"></i>位置</span>
												<select class="select wide">
													<option>高新区</option>
													<option>火车站</option>
													<option>机场</option>
													<option>医院</option>
													<option>学校</option>
												</select>
											</div>
										</div>

										<div class="col-md-2">
											<div class="select-sub">
												<span> <i class="glyphicon glyphicon-header" style="font-size: 18px;"></i> 酒店级别</span>
												<select class="select wide">
													<option>不限</option>
													<option>经济型</option>
													<option>舒适/三星</option>
													<option>高档/四星</option>
													<option>豪华/五星</option>
													<option>民宿</option>
												</select>
											</div>
										</div>
										<div class="col-md-2">
											<div class="select-sub">
												<span> <i class="glyphicon glyphicon-star" style="font-size: 18px;"></i>品牌</span>
												<select class="select wide">
													<option>如家</option>
													<option>汉庭</option>
													<option>格林豪泰</option>
													<option>汉庭优佳</option>
													<option>希尔顿</option>
													<option>华驿</option>
												</select>
											</div>
										</div>

										<div class="col-md-2">
											<div class="select-sub">
												<span> <i class="glyphicon glyphicon-home" style="font-size: 18px;"></i>房型</span>
												<select class="select wide">
													<option>大床房</option>
													<option>双人房</option>
													<option>家庭房</option>
													<option>海景房</option>
													<option>公寓</option>
													<option>商务套房</option>
													<option>总统套房</option>
												</select>
											</div>
										</div>

										<div class="col-md-2">
											<div class="select-sub">
												<span> <i class="glyphicon glyphicon-user" style="font-size: 18px;"></i> 入住人数</span>
												<select class="select wide">
													<option>01</option>
													<option>02</option>
													<option>03</option>
													<option>04</option>
													<option>05</option>
													<option>06</option>
												</select>
											</div>
										</div>
									</div>


								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- serch-area-end -->

			<!-- destination Company -->
			<div class="destination-service section-padding">
				<div class="container">
					<div class="col-12">
						<div class="wpo-section-title text-center">
							<span>Populer Destination</span>
							<h2>选择你的酒店</h2>
						</div>
					</div>
					
					<!-- 酒店列表 -->
					<div id="hotelList">
						<ul>
							<li v-for="hotel in hotels">
								<div class="listContent">
									<img v-bind:src="base_url+hotel.imgPath">
									<div class="listText">
										<a><h3>{{hotel.hotelName}}</h3></a>
										<span>{{hotel.hotelTname}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
										<p>靠近{{hotel.hotelLoc}}</p>
										<p class="listAttr">无线上网，热水洗浴qwewqeqweqweqwewqeqweqwewqe，无线上网</p>
									</div>
								</div>
								<div class="clickOrder">
									<a href="#"><h3>预订</h3></a>
								</div>
							</li>

						</ul>
					</div>
					<!-- 酒店列表结束 -->
				
				</div>
			</div>
			<!-- destination Company END -->
			<!--Start Room area-->
			<section class="Room-area section-padding">
				<div class="Room-section">
					<div class="container">
						<div class="col-12">
							<div class="wpo-section-title">
								<span>Our Rooms</span>
								<h2>选择我们的房间</h2>
							</div>
						</div>
						<div class="row">
							<div class="col col-xs-12 sortable-gallery">
								<div class="gallery-filters">
									<ul>
										<li><a data-filter=".Classic" href="#" class="current">经典</a></li>
										<li><a data-filter=".Budget" href="#">豪华</a></li>
										<li><a data-filter=".Luxury" href="#">双人</a></li>
										<li><a data-filter=".Double" href="#">单人</a></li>

									</ul>
								</div>
								<div class="gallery-container gallery-fancybox masonry-gallery">
									<div class="grid  Luxury Double Single Classic">
										<div class="room-item">
											<img src="assets/images/room/img-1.jpg" alt class="img img-responsive">
											<div class="room-text-show">
												<h2>Lake view Room</h2>
											</div>
											<div class="room-text-hide">
												<h2>Lake view Room</h2>
												<span>Twin Room</span>
												<p>If you are going to use a passage Lorem Ipsum, you need to be sure there isn't anything embarrassing
													hidden in the middle of text.</p>
												<small>From: <span>$142</span> / Night</small>
												<a class="theme-btn-s2" href="#">Check Availability</a>
											</div>
										</div>
									</div>
									<div class="grid Classic Luxury Single">
										<div class="room-item">
											<img src="assets/images/room/img-2.jpg" alt class="img img-responsive">
											<div class="room-text-show">
												<h2>Queen Room Balcony</h2>
											</div>
											<div class="room-text-hide">
												<h2>Queen Room Balcony</h2>
												<span>Twin Room</span>
												<p>If you are going to use a passage Lorem Ipsum, you need to be sure there isn't anything embarrassing
													hidden in the middle of text.</p>
												<small>From: <span>$142</span> / Night</small>
												<a class="theme-btn-s2" href="#">Check Availability</a>
											</div>
										</div>
									</div>
									<div class="grid Budget Double Classic">
										<div class="room-item">
											<img src="assets/images/room/img-3.jpg" alt class="img img-responsive">
											<div class="room-text-show">
												<h2>Apartment</h2>
											</div>
											<div class="room-text-hide">
												<h2>Apartment</h2>
												<span>Twin Room</span>
												<p>If you are going to use a passage Lorem Ipsum, you need to be sure there isn't anything embarrassing
													hidden in the middle of text.</p>
												<small>From: <span>$142</span> / Night</small>
												<a class="theme-btn-s2" href="#">Check Availability</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div> <!-- end row -->
					</div>
				</div>
			</section>
			<!--End Room area-->

			<!-- testimonial-area start -->
			<div class="testimonial-area section-padding">
				<div class="container">
					<div class="col-12">
						<div class="wpo-section-title">
							<span>What Say Clients</span>
							<h2>我们的客户 <br> 对我们很重要</h2>
						</div>
					</div>
					<div class="row">
						<div class="col-lg-12">
							<div class="testimonial-slider clearfix">
								<div class="grid">
									<div class="ratting">
										<ul>
											<li><i class="fi flaticon-star"></i></li>
											<li><i class="fi flaticon-star"></i></li>
											<li><i class="fi flaticon-star"></i></li>
											<li><i class="fi flaticon-star"></i></li>
											<li><i class="fi flaticon-star"></i></li>
										</ul>
									</div>
									<div class="quote">
										<p>“The trip was incredible. I got to see so many places I wouldn't have by myself, me and my husband really
											enjoyed a lot.”</p>
									</div>
									<div class="client-info">
										<div class="client-img">
											<img src="assets/images/testimonial/img-1.jpg" alt="">
										</div>
										<div class="client-text">
											<h5>Benjir Walton</h5>
											<p>Singapore</p>
										</div>
									</div>
								</div>
								<div class="grid">
									<div class="ratting">
										<ul>
											<li><i class="fi flaticon-star"></i></li>
											<li><i class="fi flaticon-star"></i></li>
											<li><i class="fi flaticon-star"></i></li>
											<li><i class="fi flaticon-star"></i></li>
											<li><i class="fi flaticon-star"></i></li>
										</ul>
									</div>
									<div class="quote">
										<p>“The trip was incredible. I got to see so many places I wouldn't have by myself, me and my husband really
											enjoyed a lot.”</p>
									</div>
									<div class="client-info">
										<div class="client-img">
											<img src="assets/images/testimonial/img-2.jpg" alt="">
										</div>
										<div class="client-text">
											<h5>Jenefar Meera</h5>
											<p>Canada</p>
										</div>
									</div>
								</div>
								<div class="grid">
									<div class="ratting">
										<ul>
											<li><i class="fi flaticon-star"></i></li>
											<li><i class="fi flaticon-star"></i></li>
											<li><i class="fi flaticon-star"></i></li>
											<li><i class="fi flaticon-star"></i></li>
											<li><i class="fi flaticon-star"></i></li>
										</ul>
									</div>
									<div class="quote">
										<p>“The trip was incredible. I got to see so many places I wouldn't have by myself, me and my husband really
											enjoyed a lot.”</p>
									</div>
									<div class="client-info">
										<div class="client-img">
											<img src="assets/images/testimonial/img-3.jpg" alt="">
										</div>
										<div class="client-text">
											<h5>Lily monalisa</h5>
											<p>Singapore</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- testimonial-area end -->

			<!-- start wpo-site-footer -->
			<footer class="wpo-site-footer">
				<div class="wpo-upper-footer">
					<div class="wpo-footer-top">
						<div class="container">
							<div class="row">
								<div class="col-lg-6 col-md-6 col-sm-6 col-12 custom-grid">
									<div class="logo widget-title">
										<img src="assets/images/logo.png" alt="blog">
									</div>
								</div>
								<div class="col-lg-6 col-md-6 col-sm-6 col-12 custom-grid">
									<ul>
										<li><a href="#"><i class="ti-facebook"></i></a></li>
										<li><a href="#"><i class="ti-twitter-alt"></i></a></li>
										<li><a href="#"><i class="ti-instagram"></i></a></li>
										<li><a href="#"><i class="ti-google"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="footer-middle">
						<div class="container">
							<div class="row">
								<div class="col col-lg-3 col-md-3 col-sm-6">
									<div class="widget market-widget wpo-service-link-widget">
										<div class="widget-title">
											<h3>Contact </h3>
										</div>
										<p>online store with lots of cool and exclusive features</p>
										<div class="contact-ft">
											<ul>
												<li><i class="fi ti-location-pin"></i>28 Street, New York City, USA</li>
												<li><i class="fi ti-mobile"></i>+000123456789</li>
												<li><i class="fi flaticon-email"></i>Hastium@gmail.com</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="col col-lg-3 col-md-3 col-sm-6">
									<div class="widget link-widget resource-widget">
										<div class="widget-title">
											<h3>Destination</h3>
										</div>
										<div class="news-wrap">
											<div class="news-img">
												<img src="assets/images/footer/img-1.jpg" alt="">
											</div>
											<div class="news-text">
												<h3>Paris, France</h3>
												<span>11 Jun 2020 - 22 Jun 2020</span>
												<h2>$835</h2>
											</div>
										</div>
										<div class="news-wrap">
											<div class="news-img">
												<img src="assets/images/footer/img-2.jpg" alt="">
											</div>
											<div class="news-text">
												<h3>San Francisco</h3>
												<span>11 Jun 2020 - 22 Jun 2020</span>
												<h2>$835</h2>
											</div>
										</div>
									</div>
								</div>
								<div class="col col-lg-3 col-md-3 col-sm-6">
									<div class="widget link-widget">
										<div class="widget-title">
											<h3>Useful Links</h3>
										</div>
										<ul>
											<li><a href="about.html">About Us</a></li>
											<li><a href="room.html">Our Offers</a></li>
											<li><a href="service.html">How Spread</a></li>
											<li><a href="contact.html">Contact Us</a></li>
											<li><a href="service-single.html">Our Event</a></li>
										</ul>
									</div>
								</div>
								<div class="col col-lg-3 col-md-3 col-sm-6">
									<div class="widget newsletter-widget">
										<div class="widget-title">
											<h3>Newsletter</h3>
										</div>
										<form>
											<div class="input-1">
												<input type="email" class="form-control" placeholder="Email Address *" required="">
											</div>
											<div class="submit clearfix">
												<button type="submit">subscribe<i class="ti-angle-right"></i></button>
											</div>
										</form>
									</div>
								</div>
							</div>
						</div> <!-- end container -->
					</div>
				</div>
				<div class="wpo-lower-footer">
					<div class="container">
						<div class="row">
							<div class="col col-md-6 col-sm-6">
								<div class="term">
									<ul>
										<li><a href="#">Privecy Policy</a></li>
										<li><a href="#">Terms & Condition</a></li>
										<li><a href="#">Cookies</a></li>
									</ul>
								</div>
							</div>
							<div class="col col-md-6 col-sm-6">
								<p class="copyright">Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
							</div>
						</div>
					</div>
				</div>
			</footer>
			<!-- end wpo-site-footer -->
		</div>
		<!-- All JavaScript files
    ================================================== -->
		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/owl.carousel.min.js"></script>
		<!-- Plugins for this template -->
		<script src="assets/js/jquery-plugin-collection.js"></script>
		<script src="assets/js/bootstrap-datepicker.min.js"></script>
		<!-- Custom script for this template -->
		<script src="assets/js/script.js"></script>
		<script src="js/jquery-3.2.1.js"></script>
		<script src="js/common.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/axios.min.js"></script>
	</body>
<script>

	var app = new Vue({
		el:"#hotelList",
		data:{
			base_url:base_url,
			hotels:[]
		},
		methods:{
			list:function () {
				axios.post('http://localhost:8080/Hotel_Project/hotel/list').then(function (response) {
					// console.log(response);
					app.hotels = response.data.result;
				})
			}
		},
		mounted:function () {
			this.list();
		}
	})

</script>
</html>
